<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>
</head>
<div id="Content">
    <div id="Catalog">
        <script th:if="${sss} eq 'success'">
            alert("信息修改成功");
        </script>
        <script th:if="${sss} eq 'password error'">
            alert("信息修改失败，请确定前后密码是否一致");
        </script>
        <script th:if="${sss} eq 'resetSuccess'">
            alert("密码重置成功，重置后为“123456");
        </script>
        <script th:if="${sss} eq 'error'">
            alert("密码重置失败");
        </script>
        <form action="/account/confirmEdit" method="post">

            <h3>User Information</h3>

            <table>
                <tr>
                    <td>User ID:</td>
                    <td th:text="${account.username}">${account.username}</td>
                </tr>
                <tr>
                    <td>New password:</td>
                    <td>
                        <input type="password" name="password" id="password" onblur="password()"/>
                        <div id="password1"></div>
                    </td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td>
                        <input type="password" name="repeatedPassword" id="repeatedPassword"  onblur="checkPassword()"/>
                        <div id="checkPassword"></div>
                    </td>
                </tr>
            </table>

            <h3>Account Information</h3>

            <table>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstName" th:value="${account.firstName}"/></td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastName" th:value="${account.lastName}" /></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" th:value="${account.email}" /></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" th:value="${account.phone}" /></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="address1" th:value="${account.address1}" /></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="address2" size="40" th:value="${account.address2}" /></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" th:value="${account.city}" /></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="state" size="4"th:value="${account.state}" /></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" name="zip" size="10" th:value="${account.zip}" /></td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="country" size="15" th:value="${account.country}" /></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference" id="languagePreference" >
                            <!--                        <c:forEach var="languages" items="${session.languages}">-->
                            <option th:each="languages:${languages}" th:text="${languages}">${languages}</option>
                            <!--                        </c:forEach>-->
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td>
                        <select name="favouriteCategoryId" id="favouriteCategoryId" >
                            <!--                        <c:forEach var="categories" items="${session.categories}">-->
                            <option th:each="categories:${categories}" th:text="${categories}">${categories}</option>
                            <!--                        </c:forEach>-->
                        </select>
                    </td>
                </tr>
                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td><input type="checkbox" name="listOption" value="1" /></td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td><input type="checkbox" name="bannerOption" value="1" /></td>
                </tr>

            </table>


            <input name="editAccount" value="Save Account Information" type="submit">

        </form>
        <a th:href="@{/account/resetPassword?username=}+${account.username}">reset password</a>
</div>
</div>
</body>
</html>

<script type="text/javascript">

    function checkPassword() {
        var password = document.getElementById("password").value;
        var repeatedPassword = document.getElementById("repeatedPassword").value;
        if(password==repeatedPassword && password != "" && password!=null)
        {
            document.getElementById("checkPassword").innerHTML="<font color='green'>两次密码一致</font>"
        }
        else if(password !=repeatedPassword)
        {
            document.getElementById("checkPassword").innerHTML="<font color='red'>两次密码不一致</font>"
        }
    }
    function password() {
        var password = document.getElementById("password").value;
        if(password != "")
        {
            document.getElementById("password1").innerHTML="<font color='red'>密码可用</font>"
        }
    }
</script>